﻿jQuery.fn.SUIETabber = function () {

    var tabWP = $(this[0]);

    if ($('.ms-WPAddButton').size() == 0) {

        // get tab configuration
        var theme = $(tabWP).find('.SUIETabberTheme').text();
        var orientation = $(tabWP).find('.SUIETabberOrientation').text();
        var enabled = $(tabWP).find('.SUIETabberEnabled').text();

        if (enabled == "True") {
            var zoneTable = $(tabWP).parents('.s4-wpcell-plain').parent().parent();
            if ($(zoneTable).find('.s4-wpTopTable').size() > 1) {
                var TabberContainer = $('<div class="SUIETabberContainer">');
                var TabberContainerInner = $('<div class="SUIETabberContainerInner">');

                $(zoneTable).parent().before(TabberContainer);
                $(TabberContainer).append(TabberContainerInner);
                $(TabberContainerInner).append('<ul>');

                $(zoneTable).find('.s4-wpTopTable').each(function (i) {
                    if ($(this).find('.SUIETabber').size() <= 0) {
                        $(TabberContainerInner).find('ul').append('<li><a class="SUIETabLink" href="#SUIETab' + i + '">' + $(this).find('.ms-WPTitle').text() + '</a></li>');
                        var SUIETab = '<div id="SUIETab' + i + '">' + $(this).find('.ms-WPBody').html() + '<div class="SUIEClear"></div></div>';
                        $(TabberContainerInner).append(SUIETab);
                    }
                });
                $(zoneTable).remove();

                $(TabberContainer).addClass('SUIETabber-theme-' + theme + ' ' + theme);
                $(TabberContainer).addClass('SUIETabber-orientation-' + orientation + ' ' + orientation);
                $(TabberContainerInner).addClass('ui-tabs-' + orientation.toLowerCase());
                if (orientation.toLowerCase() == "vertical") {
                    $(TabberContainerInner).addClass('ui-helper-clearfix');
                    $(TabberContainerInner).find("li.ui-state-default").removeClass('ui-corner-top').addClass('ui-corner-left');
                    // calc width of tabs and content 
                    var tabWidth = 0;
                    var tabsContainerWidth = parseInt($(TabberContainerInner).css('width'));
                    $(TabberContainerInner).find('a.SUIETabLink').each(function (e) {
                        if (parseInt($(this).css('width')) + 40 > tabWidth)
                            tabWidth = parseInt($(this).css('width')) + 40;
                    });
                    $(TabberContainerInner).tabs();
                    $(TabberContainerInner).find('.ui-tabs-nav').css('width', tabWidth + 'px');
                    $(TabberContainerInner).find('.ui-tabs-nav').css('float', 'left');
                    $(TabberContainerInner).find('.ui-tabs-nav').removeClass('ui-helper-clearfix');
                    $(TabberContainerInner).find('.ui-tabs-panel').css('width', (tabsContainerWidth - tabWidth - 50) + 'px');
                    // fix corners
                    $(TabberContainerInner).find('.ui-tabs-nav .ui-state-default').removeClass('ui-corner-top');
                    $(TabberContainerInner).find('.ui-tabs-nav .ui-state-default').addClass('ui-corner-left');
                }
                else {
                    $(TabberContainerInner).tabs();
                }
            }
        }
    }
};

jQuery.fn.SUIETabberInitPreview = function () {
    $().SUIETabberGeneratePreview();
    // create tabs
    $('.SUIETabberContainerInner').tabs();
    // capture orientation change
    $('.SUIEConfigFormField.orientation .SUIEConfigFormFieldValue span').click(function (e) {
        $().SUIETabberGeneratePreview();
    });
    $('.SUIEConfigFormField.theme .SUIEConfigFormFieldValue select').change(function (e) {
        $().SUIETabberGeneratePreview();
    });
    // prev and next theme buttons
    $('.SUIEConfigFormField.theme .SUIEConfigFormFieldValue .btnThemePrevious').click(function (e) {
        e.preventDefault();
        var currentTheme = $('.SUIEConfigFormField.theme .ddlTheme').val();
        var prevTheme = "";
        $('.SUIEConfigFormField.theme .ddlTheme option').each(function (i) {
            if ($(this).val() == currentTheme && prevTheme != "") {
                $('.SUIEConfigFormField.theme .ddlTheme').val(prevTheme)
                $().SUIETabberGeneratePreview();
                return false;
            }
            prevTheme = $(this).val();
        });
    });
    $('.SUIEConfigFormField.theme .SUIEConfigFormFieldValue .btnThemeNext').click(function (e) {
        e.preventDefault();
        var currentTheme = $('.SUIEConfigFormField.theme .ddlTheme').val();
        var applyNextTheme = false;
        $('.SUIEConfigFormField.theme .ddlTheme option').each(function (i) {
            if ($(this).val() == currentTheme) {
                applyNextTheme = true;
            }
            else if (applyNextTheme) {
                $('.SUIEConfigFormField.theme .ddlTheme').val($(this).val())
                $().SUIETabberGeneratePreview();
                applyNextTheme = false;
                return false;
            }
        });
    });
};

jQuery.fn.SUIETabberGeneratePreview = function () {
    // clear tab preview classes 
    $('.SUIETabberContainer').removeClass('SUIETabber-orientation-Horizontal');
    $('.SUIETabberContainer').removeClass('SUIETabber-orientation-Vertical');
    $('.SUIETabberContainerInner').removeClass('ui-tabs-horizontal');
    $('.SUIETabberContainerInner').removeClass('ui-tabs-vertical');
    $('.SUIEConfigFormField.theme .ddlTheme option').each(function (i) {
        $('.SUIETabberContainer').removeClass('SUIETabber-theme-' + $(this).text());
        $('.SUIETabberContainer').removeClass($(this).text());
    });

    var theme = $('.SUIEConfigFormField.theme .ddlTheme').val();
    var orientation = $('.SUIEConfigFormField.orientation input:checked').parent().find('label').text();

    // class the tabs
    $('.SUIETabberContainer').addClass('SUIETabber-theme-' + theme + ' ' + theme);
    $('.SUIETabberContainer').addClass('SUIETabber-orientation-' + orientation + ' ' + orientation);
    $('.SUIETabberContainerInner').addClass('ui-tabs-' + orientation.toLowerCase());
    if (orientation.toLowerCase() == "vertical") {
        $('.SUIETabberContainerInner').addClass('ui-helper-clearfix');
        $(".SUIETabberContainerInner li.ui-state-default").removeClass('ui-corner-top').addClass('ui-corner-left');
        // calc width of tabs and content 
        var tabWidth = 0;
        var tabsContainerWidth = parseInt($('.TabberContainerInner').css('width'));
        $('.SUIETabberContainerInner a.TabLink').each(function (e) {
            if (parseInt($(this).css('width')) + 30 > tabWidth)
                tabWidth = parseInt($(this).css('width')) + 30;
        });
        $('.SUIETabberContainerInner .ui-tabs-nav').css('width', tabWidth + 'px');
        //$('.TabberContainerInner .ui-tabs-nav').css('float', 'left');
        $('.SUIETabberContainerInner .ui-tabs-nav').removeClass('ui-helper-clearfix');
        //$('.TabberContainerInner .ui-tabs-panel').css('width', (tabsContainerWidth - tabWidth - 40) + 'px');			
        // fix corners
        $('.SUIETabberContainerInner .ui-tabs-nav .ui-state-default').removeClass('ui-corner-top');
        $('.SUIETabberContainerInner .ui-tabs-nav .ui-state-default').addClass('ui-corner-left');
    }
    else {
        $('.SUIETabberContainerInner').removeClass('ui-helper-clearfix');
        $(".SUIETabberContainerInner li.ui-state-default").addClass('ui-corner-top').removeClass('ui-corner-left');
        $('.SUIETabberContainerInner .ui-tabs-nav').addClass('ui-helper-clearfix');
        $('.SUIETabberContainerInner .ui-tabs-nav').css('width', '227px');
        // fix corners
        $('.SUIETabberContainerInner .ui-tabs-nav .ui-state-default').addClass('ui-corner-top');
        $('.SUIETabberContainerInner .ui-tabs-nav .ui-state-default').removeClass('ui-corner-left');
    }
    // add css    
    var cssLink = "/_layouts/SUIE/css/jquery-ui/" + theme + "/jquery-ui-1.8.16.custom.css";
    var found = false;
    if ($('#SUIETabberPreviewTheme').size() > 0)
        $('#SUIETabberPreviewTheme').attr('href', cssLink);
    else
        $("#SUIETabberBaseStyles").before('<link id="SUIETabberPreviewTheme" rel="stylesheet" type="text/css" href="' + cssLink + '" />');
};
